<template>
  <section class="app-inner">
    <el-card class="header-card">
      <el-radio-group v-model="tabPosition" class="tabTop" @change="handleRadioChange">
        <el-radio-button :label="1">
          <div class="tabItem">全部告警</div>
        </el-radio-button>
        <el-radio-button :label="0">
          <div class="tabItem">未解除告警</div>
        </el-radio-button>
      </el-radio-group>

      <el-form :inline="true" :model="queryParams" size="small" label-width="70px">
        <el-form-item label="设备名称">
          <el-input clearable placeholder="请输入设备名称" v-model="queryParams.eqptName"></el-input>
        </el-form-item>

        <el-form-item label="设备类型一级" label-width="100px">
          <el-select
            v-model="eqptParentTypeId"
            @change="changParentType"
            clearable
            placeholder="请选择设备类型"
            filterable
          >
            <el-option
              v-for="item in eqptParentTypeList"
              :key="item.typeId"
              :label="item.typeName"
              :value="item.typeId"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="设备类型二级" label-width="100px">
          <el-select
            v-model="eqptTypeId"
            :disabled="!eqptParentTypeId"
            clearable
            placeholder="请选择设备类型二级"
            filterable
          >
            <el-option
              v-for="item in eqptTypeList"
              :key="item.typeId"
              :label="item.typeName"
              :value="item.typeId"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="告警类型">
          <el-select v-model="queryParams.alarmType" placeholder="请选择告警类型" clearable>
            <el-option
              v-for="item in alarmTypeList"
              :key="item.strategyId"
              :label="item.alarmType"
              :value="item.alarmType"
            ></el-option>
          </el-select>
        </el-form-item> -->

        <el-form-item label="告警等级" label-width="70px">
          <el-select v-model="queryParams.alarmLevel"
          placeholder="请选择告警类型" clearable>
            <el-option
              v-for="item in alarmLevelList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="时间">
          <el-date-picker
            v-model="queryParams.time"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item> -->

        <el-form-item>
          <el-button type="primary" @click="searchData">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="table-card">
      <el-table border :data="tableData" style="width: 100%">
        <el-table-column prop="alarmPlanEqptName" label="告警设备"></el-table-column>
        <el-table-column prop="alarmPosition" label="设备位置" width="120">
          <!-- <template slot-scope="scope">
            {{ scope.row.eqptAddress&&scope.row.eqptAddress.replace(/null/g, '未知') }}
          </template> -->
        </el-table-column>
        <el-table-column prop="alarmEqptFirstTypeName" label="设备类型一级" width="120"></el-table-column>
        <el-table-column prop="alarmEqptSecondTypeName" label="设备类型二级" width="120"></el-table-column>
        <el-table-column prop="alarmPlanName" label="告警策略名称" width="120"></el-table-column>
        <el-table-column prop="alarmContent" label="告警内容" width="300px"></el-table-column>
        <el-table-column prop="alarmLevel" label="告警等级">
          <template slot-scope="scope">
            <!-- {{ getLabel(scope.row, 1) }} -->
            {{scope.row.alarmLevel === 0 ? '初级告警' : scope.row.alarmLevel === 1 ? '中级告警' : '高级告警'}}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="alarmContition" label="告警条件">
          <template slot-scope="scope">
            {{ getLabel(scope.row, 2) }}
          </template>
        </el-table-column>
        <el-table-column prop="errorValue" label="异常值"></el-table-column> -->
        <el-table-column prop="gmtUpdated" label="告警时间" width="160px">
          <!-- <template slot-scope="scope">
            <div>
              {{ moment(scope.row.alarmDate).format('YYYY-MM-DD HH:mm:ss') }}
            </div>
          </template> -->
        </el-table-column>
        <el-table-column prop="workOrderNo" label="转为工单" width="130px">
          <template slot-scope="scope">
            <span v-if="scope.row.workOrderNo">是 | {{ scope.row.workOrderNo }}</span>
            <span v-else
              >否 | <el-button v-if="checkAuthority('/shift/word')" type="text" size="small" @click="changeToGD(scope.row.id)">转为工单</el-button></span
            >
          </template>
        </el-table-column>
        <!-- <el-table-column prop="orderStatus" label="当前工单状态">
          <template slot-scope="scope">
            {{ getLabel(scope.row, 3) }}
          </template>
        </el-table-column> -->
        <el-table-column prop="alarmOff" label="状态">
          <template slot-scope="scope">
            {{ scope.row.alarmOff === 0 ? '未解除警报' : scope.row.alarmOff === 1 ? '解除警报' : '' }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-if="checkAuthority('/select')" type="text" size="small" @click="handleEdit(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="orderNo" label="工单编号">
        </el-table-column> -->
      </el-table>
      <el-pagination
        layout="total, prev, pager, next"
        @current-change="pageHandleChange"
        :current-page="pageNum"
        :page-size="pageSize"
        :total="totalPageNum"
      ></el-pagination>
    </el-card>
    <alarmDetailDialog ref="alarmDetailDialog" @detailOk="detailOk"></alarmDetailDialog>
    <toWorkerOrder  ref='toWorkerOrder' @ok="ok"></toWorkerOrder>
  </section>
</template>

<script>
import alarmDetailDialog from './components/alarmDetailDialog.vue'
import toWorkerOrder from './components/toWokerOrder.vue'
import { getAlarmType, getAlarmDataList, createWorkOrder } from './js/alarm'
import {
  getDeviceTypeList
} from '@/views/children/safety/js/device'
import {
  alarmLevelList,
  // changeOrderList,
  stringCondition,
  numberCondition,
  booleanCondition,
  booleanValue,
  orderStatusList
} from './js/constants'
import moment from 'moment'
import { checkAuthority } from '@/utils/btnPermission' // 页面按钮权限
export default {
  name: 'AlarmList',
  components: {
    alarmDetailDialog,
    toWorkerOrder
  },
  data () {
    return {
      queryParams: {},
      eqptParentTypeList: [], // 一级类型列表
      eqptTypeList: [], // 二级类型列表
      eqptTypeId: '', // 二级类型id
      eqptParentTypeId: '', // 一级类型id
      detailVisible: false,
      toWorkerOrder: false,
      alarmTypeList: [],
      // eqptTypeList: [],
      // productList: [],
      pageNum: 1,
      pageSize: 10,
      totalPageNum: 0,
      tableData: [],
      alarmLevelList,
      productUse: false,
      tabPosition: 1
    }
  },
  mounted () {
    this.getParentEqptType()
    // this.getAlarmType()
    this.initData()
  },

  methods: {
    checkAuthority,
    moment,
    // 查询按钮
    searchData () {
      this.pageNum = 1
      this.initData()
    },

    // 获取告警列表
    async initData () {
      // const { time } = this.queryParams
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        eqptParentTypeName: this.eqptParentTypeId ? this.eqptParentTypeList.find(item => item.typeId === this.eqptParentTypeId).typeName : '',
        eqptTypeName: this.eqptTypeId ? this.eqptTypeList.find(item => item.typeId === this.eqptTypeId).typeName : ''
        // startTime: time ? time[0] : '',
        // endTime: time ? time[1] : '',
        // time: undefined

      }
      if (this.tabPosition === 0) {
        // params.alarmOff = this.tabPosition
      }
      const { code, data, msg } = await getAlarmDataList(Object.assign({}, this.queryParams, params))
      if (code === 0) {
        this.tableData = data.records
        console.log(this.tableData)
        this.totalPageNum = data.total
      } else {
        this.$message.warning(msg)
      }
    },

    // 获取设备一级类型
    async getParentEqptType () {
      try {
        const params = {
          typeLevel: 1, // 类型名称
          typeParentId: '' // 父类型id
        }
        let res = await getDeviceTypeList(params)
        if (res.code === 0) {
          this.eqptParentTypeList = res.data
        } else {
          this.$message.warning(res.msg)
        }
      } catch (e) {}
    },
    // 获取设备二级类型 20220427 dong
    async changParentType (value) {
      if (value != null && value !== '' && value !== undefined) {
        try {
          const params = {
            typeLevel: 2, // 类型名称
            typeParentId: value // 父类型id
          }
          let res = await getDeviceTypeList(params)
          if (res.code === 0) {
            this.eqptTypeList = res.data
          }
        } catch (e) {}
      }
    },
    // 获取告警类型
    async getAlarmType () {
      const { code, data, msg } = await getAlarmType()
      if (code === 0) {
        this.alarmTypeList = data
      } else {
        this.$message.warning(msg)
      }
    },

    getLabel (row, type) {
      // type: 1: 告警等级 2: 告警条件 3: 工单状态
      if (type === 1) {
        return this.$base.constFormatter(alarmLevelList, row.alarmLevel)
      }
      if (type === 2) {
        // attributeType:  0：数值，1：字符，2：布尔
        let tempConditionArr = [] // 条件
        let tempValueArr = [] // 值
        if (row.attributeType === '0') tempConditionArr = numberCondition
        if (row.attributeType === '1') tempConditionArr = stringCondition
        if (row.attributeType === '2') {
          tempConditionArr = booleanCondition
          tempValueArr = booleanValue
        }
        let str = []
        if (row.alarmContition && row.alarmValue) {
          let key = this.$base.constFormatter(tempConditionArr, row.alarmContition)
          let value =
            row.attributeType !== '2' ? row.alarmValue : this.$base.constFormatter(tempValueArr, row.alarmValue)
          str.push((row.eqptAttribute || '') + key + value + (row.attributeSuffix || ''))
        }
        if (row.alarmContition2 && row.alarmValue2) {
          let key = this.$base.constFormatter(tempConditionArr, row.alarmContition2)
          let value =
            row.attributeType !== '2' ? row.alarmValue2 : this.$base.constFormatter(tempValueArr, row.alarmValue2)
          str.push(key + value + (row.attributeSuffix || ''))
        }
        return str.join('且')
      }
      if (type === 3) {
        return this.$base.constFormatter(orderStatusList, row.orderStatus)
      }
    },

    // 页码改变
    pageHandleChange (page) {
      this.pageNum = page
      this.initData()
    },
    handleEdit (row) {
      this.$nextTick(() => {
        this.$refs.alarmDetailDialog.open(row)
      })
    //   this.$router.push({ path: 'AlarmDetail', query: { id: id } })
    },
    async changeToGD (id) {
      this.$confirm('是否确认转为工单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$nextTick(() => {
            this.$refs.toWorkerOrder.open(id)
          })
        })
        .catch(() => {
          this.$message.warning('已取消')
        })
    },
    detailOk () {
      this.initData()
    },
    ok () {
      this.initData()
    },
    async getWorkOrder (dataId) {
      let params = {
        dataId: dataId
      }
      const { code, msg } = await createWorkOrder(params)
      if (code === 0) {
        this.initData()
      } else {
        this.$message.warning(msg)
      }
    },
    handleRadioChange () {
      this.pageNum = 1
      this.initData()
    }
  }
}
</script>

<style lang="scss" scoped>
.app-inner {
  .header-card {
    margin-bottom: 10px;
  }
  .table-card {
    .el-pagination {
      text-align: center;
      display: block;
      margin: 10px auto;
    }
    /deep/ .el-table th {
      display: table-cell !important;
    }
    .endTime {
      margin-left: 20px;
    }
    .time-span {
      margin-right: 5px;
    }
  }
  .el-dialog {
    .el-select {
      width: 100%;
    }
  }
}
.tabTop {
  margin: 0 0 20px 15px;
}
/deep/ .el-button--text {
  font-size: 14px;
}
</style>
